<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>卡片模板展示</title>
	</head>
	<style type="text/css">
		em, i{ font-style:normal; }
		img[title]{ border: 1px solid #1AA5C3; background: #008200;}
		input[type=checkbox],
		input[type=button],
		input[type=password],
		input[type=radio],
		input[type=submit]{
			-webkit-appearance:none;border:none;
			outline:none
		}
		.ar {text-align: right;}
		.lh30{ line-height:30px; }


		/*height*/
		.h30{ height:30px; }

		/*color*/
		.color_gray{ color:#ADADB3; }
		.color-red { color:#d93b3b ;}
		.color-white { color:#fff ;}
		/*背景色*/
		.bg_blue { background: #3BB7D9;}
		.card {
			min-height: 85px; margin:30px 10px 10px 10px; padding: 5px 5px 5px 100px; 
			background:#f5f7fa; border:1px solid #e1e2e3; position: relative;
			-webkit-box-align:center; -moz-box-align:center;     display: -webkit-box;
		}
		.card img {width: 85px; height: 85px; position: absolute; top: 5px; left: 10px; }
		.card div { width: 100% }
		.card h6 { 
			font-size: 15px;color:#4f4f4f; 
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			-moz-line-clamp: 2;
			-moz-box-orient: vertical;
			-o-line-clamp: 2;
			-o-box-orient: vertical;
			margin:0; padding:0;
			font-size:100%;	font-weight:500;
			}
		.card input[type=button] {
			background:#eb4f3f;border-radius:6px;width:60px;height:28px; font-size: 13px; 
			color: #fff; position: absolute; right: 0px; bottom: 0px;
			}
		.card input[type=button].bg-blue { background:#22c5e5; }
		.card  p{ margin-top: 5px; }
		.card .btn-p { position: relative; padding-right: 70px; min-height: 30px; }
		.card .hz,
		.card .dj {
			background:#eb4f3f;border-radius:3px;width:50px;height:25px;color: #fff; display: inline-block;vertical-align: middle; font-size: 13px;
			line-height: 25px; text-align: center;
		}
		.card .dj{ background:#22c5e5; }
		.card i { 
			position: absolute; background:#22c5e5;border-top-right-radius:18px;width:75px;height:20px; font-size: 12px; color: #fff;
			text-align: center;left: -1px; top:-20px; line-height: 23px;
		}
		.card i.bg-red { background:#eb4f3f; }
		.card i.bg-green { background:#41d6d1; }
		.cardr { margin:10px; padding:10px 5px; background:#f5f7fa; border:1px solid #e1e2e3; position: relative; }
		.cardr ul { border-top:1px solid #e1e2e3; padding-top:10px; text-align: center; margin-top:10px;}
		.cardr li { width: 32%;color:#adadb3;}
		.cardr img {width:40px;height:40px;border-radius:50%; }
		.cardr img ,
		.cardr li ,
		.cardr span ,
		.cardr i { display: inline-block; vertical-align: middle;  } 
		.cardr b { display: block;font-size:17px;color:#4f4f4f; font-weight: bold;line-height: 30px }
		.cardr span { font-size:17px;color:#4f4f4f; }
		.card a { position: absolute; width:100%; height:100%; z-index:5;}
		.card .yuan { border-radius: 50%; width: 75px; height: 75px;top:10px; }
	</style>
	<body>

		<section class="card">
			<a href="#"></a>
			<img src="http://jog-test.mobileapi.hupu.com/static/images/bbs_channel_zhuangbei.png">
			<div>
				<h6>SAUCONY</h6>
				<p class="btn-p lh30 ar color_gray">
					淘宝
					<input type="button" name="" value="去购买">
				</p>
			</div>
		</section>
		<section class="card">
			<img src="http://irun.hupu.com/static/images/bbs_channel_zhuangbei.png">
			<i class="tip">众测</i>
			<div>
				<h6>啦啦啦啦啦啦啦啦啦啦了啦啦啦啦啦啦啦啦啦啦了啦啦啦啦啦啦啦啦啦啦了</h6>
				<p class="btn-p lh30">
					发放分数：100
					<input class="bg-blue" type="button" name="" value="申请">
				</p>
			</div>
		</section>
		<section class="card">
			<img src="http://irun.hupu.com/static/images/bbs_channel_zhuangbei.png">
			<i  class="tip bg-red">闪购</i>
			<div>
				<h6>SAUCONY圣康尼TRIUMPH222</h6>
				<p class="btn-p">
					<span class="color-red f18">749</span>元<br/>
					12
					<span class="color_gray">月</span>
					12
					<span class="color_gray">日</span>
					10
					<span class="color_gray">点结束</span>
					
					<input type="button" name="" value="下单">
				</p>
				
			</div>
		</section>
		<section class="card">
			<img src="http://irun.hupu.com/static/images/bbs_channel_zhuangbei.png">
			<div>
				<h6>SAUCONY圣康尼TRIUMPH222缓冲避震</h6>
				<p>
					<span class="hz">缓震</span>
					<span class="dj">顶级</span>
				</p>
			</div>
		</section>
		<section class="card">
			<img src="http://irun.hupu.com/static/images/bbs_channel_zhuangbei.png">
			<div>
				<h6>SAUCONY圣康尼TRIUMPH222缓冲避震</h6>
				<p>从92年到现在，赛季进球数最...</p>
			</div>
		</section>
		<section class="card">
			<i  class="tip bg-green">群组</i>
			<img class="yuan" src="http://irun.hupu.com/static/images/bbs_channel_zhuangbei.png">
			<div>
				<h6>SAUCONY圣康尼TRIUMPH222缓冲避震</h6>
				<p>从92年到现在，赛季进球数最...</p>
			</div>
		</section>
		<section class="cardr">
			<div>
				<img src="http://irun.hupu.com/static/images/bbs_channel_zhuangbei.png">
				<span>密尔的索罗斯</span>
				<i class="level level-18"></i>
			</div>
			<ul>
				<li>
					发帖数
					<b>11</b>
				</li>
				<li>
					跑步里程（km)
					<b>13432.99</b>
				</li>
				<li>
					跑步次数
					<b>1567</b>
				</li>
			</ul>
		</section>
	</body>
</html>